<template>
    <div class="drawer_form_mode">
        <el-drawer title="发邮件" v-model="drawerShow" 
            direction="rtl" :before-close="handleClose" :size="900"
            :close-on-click-modal="false">
            <el-form :model="emailForm" :rules="formRules" ref="formRef" :inline="true" 
                label-position="top" require-asterisk-position="right">
                <el-row :gutter="24">
                    <el-col :span="24" class="relative">
                        <div style="position: absolute;right: 12px;top: 0px;" v-if="!isAddCC">
                            <el-button link type="primary" @click="isAddCC = true">添加抄送人</el-button>
                        </div>
                        <el-form-item label="收件人" prop="receiverList">
                            <DataCommunicationBook v-model="emailForm.receiverList" :filterIds="emailForm.ccList" :filterSelf="true"
                                placeholder="请选择收件人"></DataCommunicationBook>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="isAddCC" class="relative">
                        <div style="position: absolute;right: 12px;top: 0px;">
                            <el-button link type="primary" @click="removeCCInfo">移除抄送人</el-button>
                        </div>
                        <el-form-item label="抄送人" prop="ccList">
                            <DataCommunicationBook v-model="emailForm.ccList" :filterIds="emailForm.receiverList" :filterSelf="true"
                                placeholder="请选择抄送人"></DataCommunicationBook>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="主题" prop="title">
                            <el-input v-model="emailForm.title" placeholder="请输入邮件主题"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="relative">
                        <div style="position: absolute;right: 12px;top: -5px;">
                            <DataUploadPlus v-model="emailForm.fileList" :showFileList="false" label="添加附件"
                                @finish="finish"></DataUploadPlus>
                        </div>
                        <el-form-item label="正文" prop="content">
                            <editor v-model="emailForm.content" type="url" :min-height="260"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" v-if="emailForm.fileList.length">
                        <el-form-item label="附件信息" prop="plicyNo">
                            <ul>
                            <li v-for="(fItem, fIndex) in emailForm.fileList" class="flex">
                                <i class="icon-base icon-base-appendix" 
                                    style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                                <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                                <el-button link type="primary" @click="removeFile(fItem, fIndex)">移 除</el-button>
                            </li>
                        </ul>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="warning" @click="temporarySave" v-if="!state">存草稿</el-button>
                    <el-button type="warning" @click="save" v-else>暂 存</el-button>
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitForm">发 送</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import DataUploadPlus from "@/components/DataComponents/DataUploadPlus.vue"
    import DataCommunicationBook from "@/components/DataComponents/DataCommunicationBook.vue"
    import { ElMessage } from 'element-plus'
    const { proxy } = getCurrentInstance();
    const props = defineProps(['show', 'defaultValue', 'state']);
    const emit = defineEmits(['update:show', 'submit', 'save', 'temporarySave']);
    const drawerShow = ref(false);
    const isAddCC = ref(false);
    const emailForm = ref({ receiverList: [], ccList: [], content: undefined, fileList: [] })
    const formRules = ref({
        receiverList: { required: true, trigger: ['blur'], message: '请至少添加一名收件人' },
        title: { required: true, trigger: ['blur'], message: '请输入邮件主题', },
        content: { required: true, trigger: ['blur'], message: '请输入邮件内容' },
    });
    watch(() => props.show, () => {
        drawerShow.value = props.show;
        if(drawerShow.value){
            if(props.state) setDedefaultValue();
        }else{
            resetFormData();
        }
    }, { deep: true });
    const setDedefaultValue = () => {
        const defaultForm = props.defaultValue || {}
        emailForm.value.id = defaultForm.mailId;
        emailForm.value.title = defaultForm.asMail ? defaultForm.asMail.title : '';
        emailForm.value.content = defaultForm.asMail ? defaultForm.asMail.content : '';
        const receiverList = defaultForm.asMail && defaultForm.asMail.mailUserList 
            ? defaultForm.asMail.mailUserList.filter( item => item.userType == 1 ) : []
        const ccList = defaultForm.asMail && defaultForm.asMail.mailUserList 
            ? defaultForm.asMail.mailUserList.filter( item => item.userType == 2 ) : []
        emailForm.value.receiverList = receiverList.map( item => item.userId );
        emailForm.value.ccList = ccList.map( item => item.userId );
        isAddCC.value = ccList.length > 0 ? true : false;
        const fileListTime = defaultForm.asMail && defaultForm.asMail.attach ? defaultForm.asMail.attach.split(',') : []
        fileListTime.map( item => {
            const names = item.split('/');
            const obj = { name: names[names.length - 1], url: item }
            emailForm.value.fileList.push(obj);
        });
    };
    // 存草稿
    const temporarySave = () => {
        emit('temporarySave', emailForm.value);
        handleClose();
    };
    // 暂存
    const save = () => {
        emit('save', emailForm.value, '0');
    };
    const removeCCInfo = () => {
        emailForm.value.ccList = [];
        isAddCC.value = false;
    };
    const removeFile = (item, index) => {
        emailForm.value.fileList.splice(index, 1);
    };
    const finish = () => {
        ElMessage({ type: 'success', message: '附件添加成功', })
    };
    const submitForm = () => {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                emit('submit', emailForm.value, '1');
            }
        })
    };
    const resetFormData = () => {
        emailForm.value = { receiverList: [], ccList: [], content: undefined, fileList: [] };
        isAddCC.value = false;
        proxy.resetForm("formRef");
    };
    const handleClose = () => {
        emit('update:show', false);
        resetFormData();
    };
    defineExpose({handleClose});
</script>
<style scoped lang="scss">
    :deep(.el-drawer__body){
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 20px;
    }
</style>